<template>
    <div style="display: flex">
        <div style="flex: 1;">
            <!--          收缩按钮-->
<!--   collapseIcon 和 collapseTitle 来动态设置按钮的图标和标题         -->
            <span style="font-size: 20px;cursor: pointer" :class="collapseIcon" v-on:click="$emit('collapse')" :title="collapseTitle"></span>
            <!--          返回按钮-->
            <span style="font-size: 20px;cursor: pointer;margin-left: 10px" class='el-icon-back' v-on:click="back" title="返回"></span>
            <!--    页签 2.面包屑-->
            <el-breadcrumb style="display: inline-block; margin-left: 30px;font-size: 17px">
                <el-breadcrumb-item :to="{ path: '/manage/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>{{routePath}}</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <!--          设置按钮-->
        <el-dropdown style="margin-right: 40px;cursor: pointer">
<!--            头像-->
    <span class="el-dropdown-link">
      <div style="display: inline-block">
        <img :src="user.avatarUrl" class="avatar">
             {{user.nickname }}
      <i class="el-icon-arrow-down el-icon--right" style="margin-right: 15px"></i>
      </div>
    </span>

            <el-dropdown-menu slot="dropdown" style="text-align: center">
                <el-dropdown-item>
                    <!--         <router-link to="/person">个人信息</router-link>-->
                    <div @click="$router.push('/manage/person')">个人信息</div>
                </el-dropdown-item>
                <el-dropdown-item>
                    <div @click="logout">退出</div>
                </el-dropdown-item>

            </el-dropdown-menu>
        </el-dropdown>

    </div>
</template>

<script>
    import request from "@/utils/request";
    export default {
        name: "Header",
        //接收父组件
        props:{
            collapseIcon: String,
            //isCollapse 的状态切换不同的图标类名
            collapseTitle: String,
        //标悬停在按钮上时显示的提示文本，根据 isCollapse 的状态显示不同的文本。
            user: Object


        },
        methods:{
            back(){
                this.$router.go(-1)
            //    监听路由调回上一个
            },
            logout() {
                localStorage.removeItem("user");
                //从浏览器的本地存储（localStorage）中移除名为 "user" 的存储项。
                this.$router.push('/login');
                this.$message.success("退出成功");
            },

        },
        data(){
          return{
              routePath: '',

          }
        },
        watch:{
            //3.当路由发生变化时，Vue实例中watch属性会监测$route对象的变化，
            //面包屑
            //监测当前页面路由信息 实时更新面包屑导航的显示。
            '$route': function (){
                this.routePath=this.$route.meta.path
            },


        },
        created() {
            //1.在组件被实例创建之后立即调用 将 this.routePath 设置为当前路由的 path，
            // 初始化时也确保了面包屑导航的正确显示。
            this.routePath=this.$route.meta.path;
        },
    }
</script>

<style scoped>
    .avatar{
        width: 30px;
        border-radius: 50%;
        position: relative;
        top: 10px;
        right: 5px;
    }
</style>